<template>
  <div class="wrap-box">
    <div class="canvas-content">
      <canvas id="my-canvas" width="300" height="300"></canvas>
    </div>
    <div class="img-content">
      <img src="../../assets/rjl.jpg" alt="" class="my-img">
    </div>
  </div>
</template>
<script>
export default {
  mounted(){
    this.drawPic()
  },
  methods:{
    drawPic(){
      /* //场景二
      let img = new Image();
      img.src="xxx.png";//假设xxx.png是获取的scr参数
      img.onload = function(){
        ctx.drawImage(img,150,100,200,300);
      } */
      let canvas = document.getElementById('my-canvas')
      let ctx = canvas.getContext("2d");
      let img = document.querySelector('.my-img')
      img.onload=function(){
        ctx.drawImage(img,0,0,200,300)
      }

    }
  }
}
</script>

<style scoped>
.wrap-box{
  display: flex;
  align-items: center;
  padding:20px 0 0 50px;
}

#my-canvas{
  border: 1px solid orange;
}
.img-content{
  flex: 1;
}
.my-img{
  width: 200px;
  height: 300px;
}
</style>


